<template>
  <div class="setItem">
    <div class="left">
      <el-tooltip  v-if='toolText' class="box-item" effect="dark" :content="toolText">
        <span>{{ title }}</span>
      </el-tooltip>
      <span v-else>{{ title }}</span>
    </div>
    <div class="right">
      <span v-if="!isSlot" class="iconfont">&#xe660;</span>
      <slot v-else name="pro"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "",
  props: ["title","toolText"],
  setup(_, ctx) {
    const isSlot = ref("pro" in ctx.slots);

    return {
      isSlot,
    };
  },
});
</script>
<style scoped lang="scss">
.setItem {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  align-items: center;
  box-sizing: border-box;
  // cursor: pointer;
  margin-top: 10px;

  .left {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    width: 145px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
</style>
